<template>
  <z-paging ref="paging" v-model="ltArrary" @query="queryList" :refresher-enabled="false">
    <view class="header" :style="{ paddingTop: top + 'rpx' }">
      <image mode="heightFix" class="header_left" src="https://www.dingxians.cn/upload/20250424/6809a5d73d497.png"></image>
      <text class="header_title">在线开盒｜正品保障｜100%中奖</text>
      <view style="flex: 1"></view>
    </view>

    <view class="banner">
      <swiper autoplay="true" circular="true" class="swiper" indicator-dots="true" indicator-active-color="white">
        <swiper-item class="swiper_item" v-for="(item, index) in bannerData" :key="item.id">
          <image @click="nextPage(item)" class="swiper_image" :src="item.image"></image>
        </swiper-item>
      </swiper>
    </view>

    <view class="image_box">
      <!-- <image @click="header('/pages/activity/task', 1, true)" mode="scaleToFill" class="image-item"
        src="https://www.dingxians.cn/images/index/renwu.png"></image> -->
      <!-- <image @click="getCouponPanel()" mode="scaleToFill" class="image-item"
        src="https://www.dingxians.cn/images/index/lingjuan.png"></image> -->
      <image mode="scaleToFill" class="image-item"
        src="https://www.dingxians.cn/upload/20250327/67e4be5631f45.png" @click="carTo"></image>
      <image mode="scaleToFill" class="image-item" @click="zpClick"
        src="https://www.dingxians.cn/upload/20250424/6809a57e1e59f.png"></image>
		<image mode="scaleToFill" class="image-item" @click="xyw"
		  src="https://www.dingxians.cn/upload/20250513/6822f061393b9.png"></image>
      <!-- <image @click="header('/packageA/welfare/index', 1, true)" mode="scaleToFill" class="image-item"
        src="https://www.dingxians.cn/images/index/fuliwu.png"></image> -->
    </view>
    <view class="tab">
      <view @click="changeTab(item)" class="tab_item" :class="item.id === cat_id ? 'active' : ''"
        v-for="item in tabData" :key="item.id">
        {{ item.name }}
      </view>
    </view>

    <view class="goods_box">
      <view class="goods_item" @click="goDetail(item)" v-for="item, index in ltArrary" :key="index">
        <image class="goods_image" :src="item.image" mode="aspectFill"></image>
        <view class="goods_title">{{ item.name }}</view>
        <view class="price_box">
          <view class="price_box_left">
            <view class="price_icon">￥</view>
            <view class="price">{{ item.price }}</view>
          </view>
          <view class="price_ext">参考价</view>
        </view>
      </view>
    </view>
  </z-paging>
</template>
<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      top: '',
      bannerData: [],
      tabData: [],
      ltArrary: [],
      cat_id: 1,
    }
  },
  onLoad(options) {
    const { safeArea } = uni.getSystemInfoSync()
    this.top = safeArea.top + 20
    this.$refs.paging.reload()
  },
  onShow() {
    this.getBanner()
    this.getTab()
  },
  methods: {
	  zpClick(){
		  // this.show('敬请期待。。。')
		this.header('/pages/index/wheel', 1, true)  
	  },
	  xyw(){
		  this.header('/pages/xyw/index') 
	  },
	  
    getBanner() {
      api.banners
        .index()
        .then((res) => {
          if (res.code === 200) {
            this.bannerData = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getTab() {
      api.index
        .challengeBoxTypes()
        .then((res) => {
          if (res.code === 200) {
            this.tabData = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    queryList(pageNo, pageSize) {
      let data = {
        cat_id: this.cat_id,
        page: pageNo,
        limit: pageSize
      }
      api.index
        .challengeBox(data)
        .then((res) => {
          this.$refs.paging.complete(res.data.data.data)
        })
    },
    changeTab(item) {
      this.cat_id = item.id
      this.$refs.paging.reload()
    },
    goDetail(item) {
      this.header('/pages/practice/detail?mhId=' + item.id + '&boxs=' + '' + '&catId=' + this.cat_id)
    },
    carTo() {
      this.header('/pages/practice/car')
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.zp-scroll-view-absolute {
  background-image: url("https://www.dingxians.cn/upload/20250325/67e2721a07cbb.png") !important;
}

.header {
  display: flex;
  align-items: center;
  // margin: 0 30rpx;
  /*  position: fixed;
   z-index: 9999;
  top: 0; */
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;
  // background-color:#D5C7FA ;
  padding-bottom: 10rpx;

  .header_left {
    display: flex;
    flex-direction: column;
    height: 38rpx;
    margin-left: 30rpx;
  }

  .header_title {
    color: #b2ad5d;
    font-size: 22rpx;
    margin-left: 4px;
    height: 38rpx;
    line-height: 38rpx;
    align-self: flex-end;
    margin-bottom: 10rpx;
  }

  .contact {
    width: 55rpx;
    height: 55rpx;
    margin-right: 30rpx;
    /* #ifdef MP-WEIXIN */
    margin-right: 180rpx;
    /* #endif */
  }
}

.banner {
  margin: 10px auto 30rpx auto;
  width: 690rpx;
  position: relative;

  &::after {
    content: '';
    background: url('https://www.dingxians.cn/images/index/swiper-border.png') no-repeat;
    background-size: 100% 100%;
    display: block;
    position: absolute;
    left: -2rpx;
    top: -2rpx;
    z-index: 1;
    height: 254rpx;
    width: 694rpx;
  }
}

.swiper {
  position: relative;
  height: 250rpx;
  border-radius: 10rpx;
  overflow: hidden;
  /* padding-top: 10rpx; */

  .swiper_item {
    width: 690rpx !important;
    height: 250rpx !important;
    border-radius: 10rpx;
    overflow: hidden;

    .swiper_image {
      width: 690rpx;
      height: 250rpx;
      border-radius: 10rpx;
    }
  }

  z-index: 2;
}

.image_box {
  display: flex;
  justify-content: space-around;
  margin: 0 30rpx;

  .image-item {
    width: 200rpx;
    height: 100rpx;
  }

  &:last-child {
    width: 231rpx;
  }
}

.tab {
  display: flex;
  align-items: center;
  width: 700rpx;
  margin: 30rpx auto 24rpx auto;
  // height: 80rpx;
  // justify-content: space-between;
  // background-color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  overflow-x: auto;

  .tab_item {
    transition: all 0.5s; //这是滑入划出的动画
    z-index: 3;
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 26rpx;
    color: white;
    flex-shrink: 0;
    background-image: url('https://www.dingxians.cn/images/shop/cat-item-bg.png');
    background-size: 100% 100%;
    margin-right: 24rpx;

    // border-radius: 10rpx;
    .tab_title {
      // background-color: #fff;
    }

    &.active {
      // color: #fff;
      font-weight: bold;
      background-image: url('https://www.dingxians.cn/images/shop/cat-item-bg-active.png');
    }

    // &:nth-child(2) {
    // 	margin-left: 20rpx;
    // }
    // &:last-child {
    // 	margin-right: 20rpx;
    // }
  }

  .tab_bg {
    width: 100rpx;
    height: 10rpx;
    position: absolute;
    border-radius: 10rpx;
    bottom: 0;
    left: 8rpx;
    background: linear-gradient(to right, #a361f6, #6a32ea);
    z-index: 2;

    &.tab_bg_2 {
      left: 156rpx;
    }

    &.tab_bg_3 {
      left: 306rpx;
    }
  }
}

.goods_box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 18rpx;
  margin: 0 auto;
  flex-wrap: wrap;

  .goods_item {
    background: url('https://www.dingxians.cn/upload/user_static/shop/goods-item-bg.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    width: 345rpx;
    height: 474rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding-top: 30rpx;

    .goods_image {
      margin: 0 auto;
      height: 292rpx;
      width: 292rpx;
    }

    .price_box {
      display: flex;
      align-items: center;
      width: 300rpx;
      margin: 5rpx auto 10rpx auto;

      .price_box_left {
        display: flex;
        align-items: baseline;
        color: #ded000;

        .price_icon {
          font-weight: bold;
          font-size: 22rpx;
        }

        .price {
          font-weight: bold;
          font-size: 40rpx;
        }
      }

      .price_float,
      .price_dot {
        font-size: 24rpx;
        font-weight: bold;
      }

      .price_ext {
        /* background-color: #e7e7e7; */
        background-color: #292929;
        font-size: 22rpx;
        margin-left: 10rpx;
        padding: 0 10rpx;
        text-align: center;
        color: #b5b5b5;
        border-radius: 5rpx;
      }
    }

    .goods_title {
      width: 300rpx;
      margin: 40rpx auto 0 auto;
      color: white;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 24rpx;
    }

    .goods_exchange_price {
      width: 300rpx;
      margin: 0 auto 10rpx auto;
      font-size: 34rpx;
      color: red;
      display: flex;
      align-items: baseline;

      .exchange_ext {
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }
  }
}
</style>